<template>
    <div>
        <el-dialog :append-to-body="true" :close-on-click-modal="false" :modal="true" :visible.sync="visible"
                   title="基本信息完善">
            <el-form ref="dataForm" :model="dataForm" label-width="100px"
                     labelWidth="120px" style="height: 400px;overflow-y: hidden">
                <!--        <el-form-item label="概要信息">-->
                <!--          <el-input v-model="dataForm.evalSummary" :maxlength="3000" :autosize="{minRows: 4, maxRows: 10}"-->
                <!--                    type="textarea"-->
                <!--                    placeholder="概要信息">-->

                <!--          </el-input>-->
                <!--        </el-form-item>-->
                <!--        <el-form-item label="基本情况">-->
                <!--          <el-input v-model="dataForm.evalBaseinfo" :maxlength="3000" :autosize="{minRows: 4, maxRows: 10}"-->
                <!--                    type="textarea"-->
                <!--                    placeholder="基本情况">-->

                <!--          </el-input>-->
                <!--        </el-form-item>-->
                <el-form-item label="畜牧业情况">
                    <el-input v-model="dataForm.evalAnimalHusband" :autosize="{minRows: 10, maxRows: 30}"
							  :disabled="disable"
                              :maxlength="3000"
                              placeholder="畜牧业情况"
                              type="textarea">

                    </el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
				<el-button @click="visible = false">取消</el-button>
				<el-button @click="copyToClipboard(dataForm.evalAnimalHusband)">复制到粘贴板</el-button>
				<el-button type="primary" @click="dataFormSubmit()">确定</el-button>
			</span>
        </el-dialog>
    </div>
</template>
<script>
import {
	Debounce
} from '@/utils/debounce'

export default {
	props: {
		disable: {
			type: Boolean,
			default: false
		}
	},
	data () {
		return {
			visible: false,
			dataForm: {
				evalMainId: null,
				evalSummary: null,
				evalBaseinfo: null,
				evalAnimalHusband: null
			}
		}
	},
	methods: {
		init (evalMainId) {
			this.visible = true
			console.info('baseinfo init')
			this.dataForm.evalMainId = evalMainId
			this.getDataList(evalMainId)
		},
		copyToClipboard (text) {
			// navigator.clipboard.writeText(text)
			// 	.then(function () {
			// 		console.log('Text copied to clipboard')
			// 		this.$message.success('已复制内容到剪贴板')
			// 	})
			// 	.catch(function (err) {
			// 		console.error('Failed to copy text: ', err)
			// 	})

			//浏览器禁用了非安全域的 navigator.clipboard 对象
			//在线上环境会报错 TypeError: Cannot read properties of undefined (reading 'writeText')
			if (!navigator.clipboard && window.isSecureContext) {
				return navigator.clipboard.writeText(text)
			} else {
				// 判断是否支持拷贝
				if (!document.execCommand('copy')) return Promise.reject()
				// 创建标签，并隐藏
				const textArea = document.createElement('textarea')
				textArea.style.position = 'fixed'
				textArea.style.top = textArea.style.left = '-100vh'
				textArea.style.opacity = '0'
				textArea.value = text
				document.body.appendChild(textArea)
				// 聚焦、复制
				textArea.focus()
				textArea.select()
				return new Promise((resolve, reject) => {
					// 不知为何，必须写这个三目，不然copy不上
					document.execCommand('copy') ? resolve() : reject()
					textArea.remove()
				})
			}
		},
		getDataList (evalMainId) {
			this.tableData = []
			this.$http({
				url: this.$http.adornUrl('/eval/getSummaryByMainId'),
				method: 'post',
				data: this.$http.adornData({
					evalMainId: evalMainId
				})
			}).then(({
				data
			}) => {
				console.log('🚀 ~ main base data', data)
				console.info(data)
				this.dataForm.evalSummary = data.evalSummary
				this.dataForm.evalAnimalHusband = data.evalAnimalHusband
				this.dataForm.evalBaseinfo = data.evalBaseinfo
				//this.tableData = data;
			})
		},
		dataFormSubmit: Debounce(function () {
				this.$http({
					url: this.$http.adornUrl('/eval/updMainSummarySelCol'),
					method: 'post',
					data: this.$http.adornData({
						...this.dataForm
					})
				}).then(({
					data
				}) => {
					this.visible = false
					console.info(data)
				})
			}
		)
	}
}
</script>
